<%@include file="/common/CHeader.jsp" %>
<%@page pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<body>
<div id="app">
    <ul class="list-group">
        <template v-for="(value,key) in unedit">
            <li class="list-group-item">
                <div class="row" style="clear: both">
                    <div class="col-md-2"><label>{{key}}</label></div>
                    <div class="col-md-10">{{value}}</div>
                </div>
            </li>
        </template>
        <template v-for="(value,key) in model">
            <li v-if="key==='password'" class="list-group-item">
                <div class="row" style="clear: both">
                    <div class="col-md-2"><label>{{key}}</label></div>
                    <div class="col-md-10"><input type="password" v-model="model[key]" class="form-control"/></div>
                </div>
            </li>

            <%--CheckBox部分--%>
            <li v-else-if="key==='sex'" class="list-group-item">
                <div class="row" style="clear: both">
                    <div class="col-md-2"><label>{{key}}</label></div>
                    <div class="col-md-10">
                        <template v-for="(v,index) in checkbox_val.sex">
                            <input type="radio" v-bind:value="index+1" v-model="model[key]"/><label>{{v}}</label>
                        </template>
                    </div>
                </div>
            </li>

            <li v-else-if="key==='state'" class="list-group-item">
                <div class="row" style="clear: both">
                    <div class="col-md-2"><label>{{key}}</label></div>
                    <div class="col-md-10">
                        <template v-for="(v,index) in checkbox_val.state">
                            <template v-if="index===0">
                                <input type="radio" v-bind:value="false" v-model="model[key]"/><label>{{v}}</label>
                            </template>
                            <template v-if="index===1">
                                <input type="radio" v-bind:value="true" v-model="model[key]"/><label>{{v}}</label>
                            </template>
                        </template>
                    </div>
                </div>
            </li>
            <%--CheckBox部分--%>

            <li class="list-group-item" v-else>
                <div class="row" style="clear: both">
                    <div class="col-md-2"><label>{{key}}</label></div>
                    <div class="col-md-10"><input v-model="model[key]" class="form-control"/></div>
                </div>

            </li>
        </template>
        <li class="list-group-item">
            <div class="row" style="clear: both">
                <div class="col-md-2"></div>
                <div class="col-md-10"><button @click="update()" class="btn btn-primary">修改该资料</button></div>
            </div>
        </li>
    </ul>



</div>


<script>
    var userId = ${user.userId};

    var vm = new Vue({
        el: '#app',
        //需要注入的模板的父元素
        data: {
            model: {},                                                 //主要解析数据
            checkbox_val: {"state": ['禁用', '有效'], "sex": ["男", "女"]}, //没什么卵用目前。标注哪些要做特殊INPUT适配
            need_hidden:['creatime', 'updatetime'],
            hidden: {},                                                //存储隐藏的不需要更新的字段
            need_unedit:['userId','username'],
            unedit:{}
        }, //end data
        created: function () {
            $.post("userById.json", {userId: userId}, function (data) {
                makeHiddenObj(vm.need_hidden, data, vm.hidden);                 //拆分出不需要更新的hidden字段
                makeHiddenObj(vm.need_unedit, data, vm.unedit);                 //拆分出不可以编辑的eidt字段
                vm.model = data;
                console.log(vm.hidden);

            });
        },
        methods: {
            update: function () {
                extendJsons(['hidden','unedit'],vm.model,vm);               //合并所有表值
                var postData = $.toJSON(vm.model);
                $.ajax({
                    type: 'POST',
                    url: "baseUpdate.json",
                    data: postData,
                    dataType: 'json',
                    contentType: "application/json",
                    success: function (data) {
                        console.log(data);
                    },

                });
            }
        }
    });


</script>
</body>
</html>
